<template>
	<a-drawer
	  v-model:open="open"
	  class="custom-class"
	  root-class-name="root-class-name"
	  style="color: red"
	  size="large"
	  title="指令列表"
	  placement="right"
	  @expand="expand"
	  @after-open-change="afterOpenChange"
	>
		<a-card class="mb-4">
      <div class="flex justify-between">
        <div class="flex">
        </div>
        <a-form layout="inline" :model="searchData" @finish="fetch({...searchData, page: pagination.current})">
          <a-form-item>
            <a-input v-model:value="searchData.title" placeholder="闹钟名称">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
    <a-card>
      <a-table row-key="id" :columns="columns" :pagination="pagination" :loading="loading" :data-source="items" @change="tableChange">
        <template #bodyCell="{ text, record, column }">
          <template v-if="column.dataIndex === 'audio'">
            <a-image shape="square" :width="64" :cover="text">
              <template #icon><FileImageOutlined /></template>
            </a-image>
          </template>
        </template>
      </a-table>
		</a-card>
	</a-drawer>
</template>
<script lang="ts">
import {page, list} from "@/mixins";

export default {
	mixins: [page, list],
	data() {
		return {
			loadPath: 'user-clock',
      open: false,
			columns: [
				{
					title: '闹钟名称',
					dataIndex: 'name',
				},
				{
					title: '时间',
					dataIndex: 'time',
				},
				{
					title: '铃声',
					dataIndex: 'audio',
				},
				{
					title: '重复次数',
					dataIndex: 'repeat',
				},
				{
					title: '创建于',
					dataIndex: 'create_at',
				},
				{
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			],
			searchData: {
        user_id: 0,
				name: ''
			}
		}
	},
	methods: {
		afterOpenChange(e: boolean){
			if(e && this.searchData.user_id > 0){
				this.items = []
				this.fetch({...this.searchData, page: this.pagination.current})		
			}
		},
    expand(){}
	}
}
</script>